<template>
  <div class="container">
    <div class="code" v-text="getCode"></div>
    <div class="country" v-text="country"></div>
  </div>
</template>

<script type="text/ecmascript-6">
  import Public from '@/assets/js/public';

  export default {
    /** kebab-case */
    name: 'cell-mobile-zone',

    data() {
      return {};
    },
    /** 在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板和 JSX 中应该始终使用 kebab-case。
     String/Number/Boolean/Function/Object/Array/Symbol */
    props: {
      code: {
        type: String,
        required: true,
        default: '86'
      },
      country: {
        type: String,
        required: true,
        default: '中国大陆'
      }
    },

    components: {},

    methods: {
      getIcon(icon) {
        return Public.ossImg + icon + '.svg';
      }
    },
    computed: {
      getCode() {
        return '+' + this.code;
      }
    }
  };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "../../assets/stylus/main.styl";
  .flex-r
    flex-x()

  .flex-c
    flex-y()

  .center
    flex-center()

  .divider
    divider()

  .space
    space()

  .container
    width 100%
    height cell-height
    //flex-center()
    flex-x()
    position relative
    background-color white

  .country
    word-vw(16px, third-ash)
    text-align center
    width 100%

  .code
    flex-center()
    height 100%
    width 17vw
    word-vw(16px, third-ash)
    position absolute
    border-right: 1px solid border-color;

</style>
